<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/todayPromotion.css">
    <title>Document</title>
</head>
<body>
    <div class="topHeader">
        <p></p>
        <h1>图书五折</h1>
        <p></p>
    </div>
    <div class="topPic">
        <img src="image/img3/today1.jpg" alt="">
        <img src="image/img3/today2.jpg" alt="">
        <img src="image/img3/today3.jpg" alt="">
        <div class="topNav">
            <div>
                <span>领券</span><span>推荐</span><span>种草</span>
            </div>
        </div>
    </div>
    <div class="all">
        <div class="activeUpdate">
            <p>活动时间： 2021.11.12</p>
            <p>活动说明</p>
        </div>
        <div class="textMenu">
            <div class="textBox1">
                <div class="one">经管生活</div>
                <div class="two">外语考试</div>
                <div class="three">特色书城</div>
                <div class="four">童书会场</div>
                <div class="five">文艺会场</div>
                <div class="six">社科会场</div>
            </div>
        </div>
        <div class="giftText">
            <div>礼券可用商品</div>
            <div>礼券活动说明</div>
        </div>
        <div class="bgTitle">
            名社好书
        </div>
        <div class="bgTitleText">
            <div class="mgdiv1">
                <div class="bgdiv1">
                    <img src="image/img3/bgdiv1-1.png" alt="">
                    <img src="image/img3/bgdiv1-2.jpg" alt="">
                    <img src="image/img3/bgdiv1-3.jpg" alt="">
                    <img src="image/img3/bgdiv1-4.png" alt="">
                    <img src="image/img3/bgdiv1-5.jpg" alt="">
                    <img src="image/img3/bgdiv1-6.png" alt="">
                    <img src="image/img3/bgdiv1-7.png" alt="">
                    <img src="image/img3/bgdiv1-8.jpg" alt="">
                </div>
            </div>
            <div class="mgdiv2">
                <div class="bgdiv2">
                    <img src="image/img3/bgdiv2-1.jpg" alt="">
                    <img src="image/img3/bgdiv2-2.jpg" alt="">
                    <img src="image/img3/bgdiv2-3.jpg" alt="">
                    <img src="image/img3/bgdiv2-4.png" alt="">
                    <img src="image/img3/bgdiv2-5.jpg" alt="">
                    <img src="image/img3/bgdiv2-6.jpg" alt="">
                    <img src="image/img3/bgdiv2-7.jpg" alt="">
                    <img src="image/img3/bgdiv2-8.png" alt="">
                </div>
            </div>
            <div class="mgdiv3">
                <div class="bgdiv3">
                    <img src="image/img3/bgdiv3-1.jpg" alt="">
                    <img src="image/img3/bgdiv3-2.jpg" alt="">
                    <img src="image/img3/bgdiv3-3.jpg" alt="">
                    <img src="image/img3/bgdiv3-4.png" alt="">
                    <img src="image/img3/bgdiv3-5.jpg" alt="">
                    <img src="image/img3/bgdiv3-6.jpg" alt="">
                    <img src="image/img3/bgdiv3-7.png" alt="">
                </div>
            </div>
        </div>
        <div class="bgTitle" style="font-size: 1.0453rem;">
            热门榜单
        </div>
        <ul class="hot">
            <li>
                <div class="hotCenter">
                    <img src="image/img3/hot1-1.jpg" alt="">
                    <p>孩子们都在看</p>
                </div>
                <p class="hotTitle">童书榜</p>
            </li>
            <li>
                <div class="hotCenter">
                    <img src="image/img3/hot1-2.jpg" alt="">
                    <p>新书来了</p>
                </div>
                <p  class="hotTitle">新书榜</p>
            </li>
            <li>
                <div class="hotCenter">
                    <img src="image/img3/hot1-3.jpg" alt="">
                    <p>阅读风向标</p>
                </div>
                <p  class="hotTitle">畅销榜</p>
            </li>
        </ul>
        <ul class="hotText">
            
        </ul>
        <div class="popularBook">
            <div class="popularTitle">热读书单</div>
            <div class="popularText">
                <ul>
                    <li>漫游儿童文学</li>
                    <li>凯迪克奖获奖作品</li>
                    <li>纽伯瑞奖获奖作品</li>
                    <li>豆瓣年度读书榜单</li>
                    <li>历届雨果奖最全书单</li>
                    <li>萌到爆棚 笑到肚疼</li>
                    <li>漫画中的人生哲理</li>
                    <li>甲骨文丛书：社科文献品牌书单</li>
                </ul>
            </div>

        </div>
        <div class="moreBook">
            <p>更多书单></p>
        </div>
        <div class="bgTitle">
            热门打卡地
        </div>
        <ul class="popularAddresses">
            <li>北京/华北</li>
            <li>上海</li>
            <li>华东地区</li>
            <li>西南地区</li>
            <li>东北地区</li>
            <li>华南地区</li>
            <li>华中地区</li>
            <li>西北地区</li>
            <li>红色线路</li>
            <li>考古线路</li>
            <li>环保之旅</li>
            <li>传统文化旅程</li>
            <li>穿越宋朝</li>
            <li>携程达人推荐</li>
        </ul>
        <div class="bflists">
            <img src="image/img3/bf1-1.jpg" alt="">
        </div>
        <div class="bottomBfOne">
            <div class="bottomBfAll">
                <div class="bottomBf">
                    <ul class="bottomBfLists">
        
                    </ul>
        
                </div>
            </div>
        </div>
        <div class="bottomBfTwo">
            <div class="bottomBfTwoLists">
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf2-1.jpg" alt="">
                    <div>
                        <p>人生海海</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf2-2.jpg" alt="">
                    <div>
                        <p>盗墓笔记·南部档案</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf2-3.jpg" alt="">
                    <div>
                        <p>沟通的方法</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf2-4.jpg" alt="">
                    <div>
                        <p>草房子</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf2-5.jpg" alt="">
                    <div>
                        <p>我的心里住着一个世界系列</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf2-6.jpg" alt="">
                    <div>
                        <p>长弓少年行</p>
                        <p>立即购买></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bflists" style="margin-top: .5333rem;">
            <img src="image/img3/bottomBf3.jpg" alt="">
        </div>
        <div class="bottomBfOne">
            <div class="bottomBfAll2">
                <div class="bottomBf2">
                    <ul class="bottomBfLists2">
        
                    </ul>
        
                </div>
            </div>
        </div>
        <div class="bottomBfTwo">
            <div class="bottomBfTwoLists">
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf4-1.jpg" alt="">
                    <div>
                        <p>人生海海</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf4-2.jpg" alt="">
                    <div>
                        <p>人生海海</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf4-3.jpg" alt="">
                    <div>
                        <p>盗墓笔记·南部档案</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf4-4.jpg" alt="">
                    <div>
                        <p>沟通的方法</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf4-5.jpg" alt="">
                    <div>
                        <p>草房子</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf4-6.jpg" alt="">
                    <div>
                        <p>我的心里住着一个世界系列</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf4-7.jpg" alt="">
                    <div>
                        <p>长弓少年行</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf4-8.jpg" alt="">
                    <div>
                        <p>长弓少年行</p>
                        <p>立即购买></p>
                    </div>
                </div>
                <div class="bottomBfTwoList">
                    <img src="image/img3/bottomBf4-9.jpg" alt="">
                    <div>
                        <p>长弓少年行</p>
                        <p>立即购买></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="recommend"> 
            为你推荐
        </div>
        <div class="novel">
            <p>小说</p>
            <p>更多<em></em></p>
        </div>
        <div class="author">
            <ul>
                <li>东野圭吾</li>
                <li>村上春树</li>
                <li>麦家</li>
                <li>莫言</li>
                <li>张爱玲</li>
                <li>刘慈欣</li>
            </ul>
        </div>
        <ul class="novelText">
            <li>
                <img src="image/img3/novel1-1.jpg" alt="">
                <p class="novelIntro">沙丘六部曲（同名电影狂揽6项奥斯卡大奖！《降临》导演执导、“甜茶”、张震等主演。每个“不可不读”的书单上都有《沙丘》）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>券</p>
                    <p>限时抢</p>
                </div>
                <p class="novelPrice">￥212.20</p>
                <div class="eBook">
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-2.jpg" alt="">
                <p class="novelIntro">我想和你穿山越岭来相爱（当当专享签名版+《笑傲江湖》情锁终生卡，《晚安，我亲爱的人》作者午歌新作！）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>开学季</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥45.60</p>
                <div class="eBook">
                    <i></i>
                    <p>电子书版&nbsp;&nbsp;￥29.99</p>
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-3.jpg" alt="">
                <p class="novelIntro">夜莺（与石黑一雄《被掩埋的巨人》一同提名国际都柏林文学奖；要经历多少次崩溃，才能成为真正的自己）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>开学季</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥64.60</p>
                <div class="eBook">
                    <i></i>
                    <p>电子书版&nbsp;&nbsp;￥54.40</p>
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-4.jpg" alt="">
                <p class="novelIntro">拉普拉斯的魔女（全新精装版，东野圭吾《解忧杂货店》之后，回归推理之作。）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>开学季</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥53.80</p>
                <div class="eBook">
                    <i></i>
                    <p>电子书版&nbsp;&nbsp;￥28.00</p>
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-5.jpg" alt="">
                <p class="novelIntro">泰坦无人声（马伯庸追更！作者修订全文，含独家万字番外《起源》。克苏鲁+太空科幻，就是这种冷彻骨髓的阅读快感！）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>开学季</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥49.80</p>
                <div class="eBook">
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-6.jpg" alt="">
                <p class="novelIntro">活着（余华代表作，精装，易烊千玺推荐阅读）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>券</p>
                    <p>限时抢</p>
                </div>
                <p class="novelPrice">￥31.00</p>
                <div class="eBook">
                    <i></i>
                    <p>电子书版&nbsp;&nbsp;￥29.99</p>
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-7.jpg" alt="">
                <p class="novelIntro">怀旧商店（当当专享作者亲签版。随书附赠黑猫书签+精美手机&电脑壁纸4张。寄存旧物，贩卖旧物。不为怀旧，只为告别。）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥35.80</p>
                <div class="eBook">
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-8.jpg" alt="">
                <p class="novelIntro">宇宙跃迁者（雨果奖作者郝景芳新作，从青铜器到超级AI，从诸子百家到星际文明，链接古老中国与未来的“时空虫洞”，开启宇宙跃迁之旅）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥39.30</p>
                <div class="eBook">
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-9.jpg" alt="">
                <p class="novelIntro">埃莱娜·费兰特作品（那不勒斯四部曲+碎片+成年人的谎言生活）（共6册）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥286.50</p>
                <div class="eBook">
                </div>
                <i class="novelGo"></i>
            </li>
        </ul>
        <!-- <div class="novel">
            <p>小说</p>
            <p>更多<em></em></p>
        </div>
        <div class="author">
            <ul>
                <li>东野圭吾</li>
                <li>村上春树</li>
                <li>麦家</li>
                <li>莫言</li>
                <li>张爱玲</li>
                <li>刘慈欣</li>
            </ul>
        </div>
        <ul class="novelText">
            <li>
                <img src="image/img3/novel1-1.jpg" alt="">
                <p class="novelIntro">沙丘六部曲（同名电影狂揽6项奥斯卡大奖！《降临》导演执导、“甜茶”、张震等主演。每个“不可不读”的书单上都有《沙丘》）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>券</p>
                    <p>限时抢</p>
                </div>
                <p class="novelPrice">￥212.20</p>
                <div class="eBook">
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-2.jpg" alt="">
                <p class="novelIntro">我想和你穿山越岭来相爱（当当专享签名版+《笑傲江湖》情锁终生卡，《晚安，我亲爱的人》作者午歌新作！）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>开学季</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥45.60</p>
                <div class="eBook">
                    <i></i>
                    <p>电子书版&nbsp;&nbsp;￥29.99</p>
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-3.jpg" alt="">
                <p class="novelIntro">夜莺（与石黑一雄《被掩埋的巨人》一同提名国际都柏林文学奖；要经历多少次崩溃，才能成为真正的自己）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>开学季</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥64.60</p>
                <div class="eBook">
                    <i></i>
                    <p>电子书版&nbsp;&nbsp;￥54.40</p>
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-4.jpg" alt="">
                <p class="novelIntro">拉普拉斯的魔女（全新精装版，东野圭吾《解忧杂货店》之后，回归推理之作。）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>开学季</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥53.80</p>
                <div class="eBook">
                    <i></i>
                    <p>电子书版&nbsp;&nbsp;￥28.00</p>
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-5.jpg" alt="">
                <p class="novelIntro">泰坦无人声（马伯庸追更！作者修订全文，含独家万字番外《起源》。克苏鲁+太空科幻，就是这种冷彻骨髓的阅读快感！）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>开学季</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥49.80</p>
                <div class="eBook">
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-6.jpg" alt="">
                <p class="novelIntro">活着（余华代表作，精装，易烊千玺推荐阅读）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>券</p>
                    <p>限时抢</p>
                </div>
                <p class="novelPrice">￥31.00</p>
                <div class="eBook">
                    <i></i>
                    <p>电子书版&nbsp;&nbsp;￥29.99</p>
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-7.jpg" alt="">
                <p class="novelIntro">怀旧商店（当当专享作者亲签版。随书附赠黑猫书签+精美手机&电脑壁纸4张。寄存旧物，贩卖旧物。不为怀旧，只为告别。）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥35.80</p>
                <div class="eBook">
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-8.jpg" alt="">
                <p class="novelIntro">宇宙跃迁者（雨果奖作者郝景芳新作，从青铜器到超级AI，从诸子百家到星际文明，链接古老中国与未来的“时空虫洞”，开启宇宙跃迁之旅）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥39.30</p>
                <div class="eBook">
                </div>
                <i class="novelGo"></i>
            </li>
            <li>
                <img src="image/img3/novel1-9.jpg" alt="">
                <p class="novelIntro">埃莱娜·费兰特作品（那不勒斯四部曲+碎片+成年人的谎言生活）（共6册）</p>
                <div class="novelDate">
                    <p>自营</p>
                    <p>券</p>
                </div>
                <p class="novelPrice">￥286.50</p>
                <div class="eBook">
                </div>
                <i class="novelGo"></i>
            </li>
        </ul> -->
    </div>

    <div class="topNavHead">
        <div class="topNavHeadLists">
            <ul>
                <li class="arr">小说</li>
                <li>文学</li>
                <li>童书</li>
                <li>青春动漫</li>
                <li>艺术</li>
                <li>人文历史</li>
                <li>古籍文化</li>
                <li>哲学心理</li>
                <li>社科政治</li>
                <li>传记</li>
                <li>成功励志</li>
                <li>经济理财</li>
                <li>管理提升</li>
                <li>亲子家教</li>
                <li>健康养生</li>
                <li>旅行美食</li>
                <li>阅享生活</li>
                <li>计算机</li>
                <li>科技</li>
                <li>中小学教辅</li>
                <li>外语</li>
                <li>考试</li>
                <li>当当出版</li>
                <li>9.9包邮</li>
                <li>期刊杂志</li>
                <li>进口原版书</li>
                <li>明星店铺</li>
            </ul>
        </div>
        <div class="topNavHeadClick">
            <div id="moreLists" onclick="moreList()">

            </div>
        </div>
    </div>




    <div class="toTop">
        <img src="image/img3/toTop.png" alt="">
    </div>
    <div class="bottomNav">
        <div>
            <img src="image/img3/bottomNav1-1.png" alt="">
        </div>
        <div>
            <img src="image/img3/bottomNav1-2.png" alt="">
        </div>
        <div>
            <img src="image/img3/bottomNav1-3.png" alt="">
        </div>
        <div>
            <img src="image/img3/bottomNav1-4.png" alt="">
        </div>
        <div>
            <img src="image/img3/bottomNav1-5.png" alt="">
        </div>
    </div>
</body>
<script src="js/reset3-1.js"></script>
<script>
    
    var rankings=['励志新书榜','传记新书榜','文化畅销榜','文学新书榜','传记畅销书榜','社会科学畅销榜','经济新书榜','动漫新书热卖榜','豆瓣读书榜','理财新书榜','心理学畅销榜','励志畅销书榜','中国好书榜','小说新书榜','文学畅销榜','小说畅销榜','历史畅销榜']
    var hotText=document.querySelector('.hotText')
    
    
    for(i=0; i<rankings.length; i++){
            
            hotText.innerHTML+=`
            <li>
                <a>
                    <p>${rankings[Math.floor(Math.random()*i)]}</p>
                </a>
            </li>
            `
            
            var hotText2=document.querySelectorAll('.hotText li')
            console.log(hotText2)
            if(hotText2.length==9){
                break
            }
            console.log(i)
            
        }
        
    setInterval(function(){
        hotText.innerHTML=''
        for(i=0; i<rankings.length; i++){
            
            hotText.innerHTML+=`
            <li>
                <a>
                    <p>${rankings[Math.floor(Math.random()*i)]}</p>
                </a>
            </li>
            `
            console.log(Math.floor(Math.random()*i))
            var hotText2=document.querySelectorAll('.hotText li')
            console.log(hotText2)
            if(hotText2.length==9){
                break
            }
            console.log(i)
            
        }

    },2000)
    


    var textMenu=document.querySelector('.textMenu')
    var textBox2=document.querySelector('.textBox1')
    var textBox1=document.querySelectorAll('.textBox1 div')
    var bgdivOne=document.querySelector('.bgdiv1')
    var bgdiv1=document.querySelectorAll('.bgdiv1 img')
    var mgdiv1=document.querySelector('.mgdiv1')
    var bgdivTwo=document.querySelector('.bgdiv2')
    var bgdiv2=document.querySelectorAll('.bgdiv2 img')
    var mgdiv2=document.querySelector('.mgdiv2')
    var bgdivThree=document.querySelector('.bgdiv3')
    var bgdiv3=document.querySelectorAll('.bgdiv3 img')
    var mgdiv3=document.querySelector('.mgdiv3')
    console.log(bgdivOne)
    console.log(textBox1[0].offsetWidth)
    
    console.log(textBox2)
    var num=0
    setInterval(function(){
        for(let i=0; i<6 ;i++){
            setTimeout(() => {
                textBox2.style=`margin-left: -${i}.4rem`
                bgdivOne.style=`margin-left: -${i}.4rem`
                bgdivTwo.style=`margin-left: -${i}.4rem`
                bgdivThree.style=`margin-left: -${i}.4rem`
            }, 30*i);
        }
            var textBox1=document.querySelectorAll('.textBox1 div')
                var a=textBox1[0]
                textBox1[0].remove()
                textBox2.appendChild(a)
            var bgdiv1=document.querySelectorAll('.bgdiv1 img')
                var a=bgdiv1[0]
                bgdiv1[0].remove()
                bgdivOne.appendChild(a)
            var bgdiv2=document.querySelectorAll('.bgdiv2 img')
                var a=bgdiv2[0]
                bgdiv2[0].remove()
                bgdivTwo.appendChild(a)
            var bgdiv3=document.querySelectorAll('.bgdiv3 img')
                var a=bgdiv3[0]
                bgdiv3[0].remove()
                bgdivThree.appendChild(a)
            
        },3000)
    



    textBox2.addEventListener('touchstart', function(event) {  
        // var touch = event.touches[0];
            startx = Math.abs(event.touches[0].screenX)  
            starty = Math.abs(event.touches[0].screenY)
            console.log(startx,starty)
            
    });
    textBox2.addEventListener('touchend',function(event){
        // console.log(e)
        touch=event.changedTouches[0]
        endx = Math.abs(touch.clientX+252)  
        endy = Math.abs(touch.clientY)
        console.log(endx,endy);
        brr=endx-startx
        console.log(brr)
        if(brr>0){
            textMenu.style='margin-left:-5.4rem'
            for(let i=0; i<6 ;i++){
            setTimeout(() => {
                textBox2.style=`margin-left: ${i}.4rem`
            }, 30*i);
        }
            var textBox1=document.querySelectorAll('.textBox1 div')
                var a=textBox1[textBox1.length-1]
                textBox1[textBox1.length-1].remove()
                textBox2.insertBefore(a,textBox1[0])
            
            
        }if(brr<0){
            textMenu.style='margin-left:0rem'
            for(let i=0; i<6 ;i++){
            setTimeout(() => {
                textBox2.style=`margin-left: -${i}.4rem`
            }, 30*i);
        }
            var textBox1=document.querySelectorAll('.textBox1 div')
                var a=textBox1[0]
                textBox1[0].remove()
                textBox2.appendChild(a)
            }
        })






    bgdivOne.addEventListener('touchstart', function(event) {  
        // var touch = event.touches[0];
            startx = Math.abs(event.touches[0].screenX)  
            starty = Math.abs(event.touches[0].screenY)
            
        });
    bgdivOne.addEventListener('touchend',function(event){
        // console.log(e)
        touch=event.changedTouches[0]
        endx = Math.abs(touch.clientX+338)  
        endy = Math.abs(touch.clientY)
        console.log(startx,endx)
        brr=endx-startx
        console.log(brr)
        if(brr>0){
            mgdiv1.style=`margin-left: -5.4rem`
            for(let i=0; i<6 ;i++){
            setTimeout(() => {
                bgdivOne.style=`margin-left: ${i}.4rem`
            }, 30*i);
        }
        var bgdiv1=document.querySelectorAll('.bgdiv1 img')
                var a=bgdiv1[bgdiv1.length-1]
                bgdiv1[bgdiv1.length-1].remove()
                bgdivOne.insertBefore(a,bgdiv1[0])
            
            
        }if(brr<0){
            bgdivOne.style='margin-left:0rem'
            for(let i=0; i<6 ;i++){
            setTimeout(() => {
                bgdivOne.style=`margin-left: -${i}.4rem`

            }, 30*i);
        }
            var bgdiv1=document.querySelectorAll('.bgdiv1 img')
                var a=bgdiv1[0]
                bgdiv1[0].remove()
                bgdivOne.appendChild(a)
            }
        })

        bgdivTwo.addEventListener('touchstart',function(event){
            startx=Math.abs(event.changedTouches[0].screenX)
        })
        bgdivTwo.addEventListener('touchend',function(event){
            endx=Math.abs(event.changedTouches[0].screenX)
            console.log(startx,endx)
            brr=endx-startx
            if(brr>0){
                mgdiv2.style='margin-left: -5.4rem'
                for(let i=0; i<6; i++){
                    setTimeout(function(){
                        bgdivTwo.style=`margin-left: ${i}.4rem`
                    },30*i)
                }
                var bgdiv2=document.querySelectorAll('.bgdiv2 img')
                var a=bgdiv2[bgdiv2.length-1]
                bgdiv2[bgdiv2.length-1].remove()
                bgdivTwo.insertBefore(a,bgdiv2[0])
            }if(brr<0){
                for(let i=0; i<6; i++){
                    setTimeout(function(){
                        bgdivTwo.style=`margin-left: -${i}.4rem`
                    },30*i)
                }
                var bgdiv2=document.querySelectorAll('.bgdiv2 img')
                var a=bgdiv2[0]
                bgdiv2[0].remove()
                bgdivTwo.appendChild(a)
            }
        })


        bgdivThree.addEventListener('touchstart',function(event){
            startx=Math.abs(event.changedTouches[0].screenX)
        })
        bgdivThree.addEventListener('touchend',function(event){
            endx=Math.abs(event.changedTouches[0].screenX)
            console.log(startx,endx)
            brr=endx-startx
            if(brr>0){
                mgdiv3.style='margin-left: -5.4rem'
                for(let i=0; i<6; i++){
                    setTimeout(function(){
                        bgdivThree.style=`margin-left: ${i}.4rem`
                    },30*i)
                }
                var bgdiv3=document.querySelectorAll('.bgdiv3 img')
                var a=bgdiv3[bgdiv3.length-1]
                bgdiv3[bgdiv3.length-1].remove()
                bgdivThree.insertBefore(a,bgdiv3[0])
            }if(brr<0){
                for(let i=0; i<6; i++){
                    setTimeout(function(){
                        bgdivThree.style=`margin-left: -${i}.4rem`
                    },30*i)
                }
                var bgdiv3=document.querySelectorAll('.bgdiv3 img')
                var a=bgdiv3[0]
                bgdiv3[0].remove()
                bgdivThree.appendChild(a)
            }
        })
    var bottomBf=document.querySelector('.bottomBf')
    var bottomBfLists=document.querySelector('.bottomBfLists')
    bottomBfLists.innerHTML=`
    <li>
        <img src="image/img3/arr1-1.jpg" alt="">
    </li>
    <li>
        <img src="image/img3/arr1-2.jpg" alt="">
    </li>
    <li>
        <img src="image/img3/arr1-3.jpg" alt="">
    </li>
    <li>
        <img src="image/img3/arr1-4.jpg" alt="">
    </li>
    <li>
        <img src="image/img3/arr1-5.jpg" alt="">
    </li>
    `
    bottomBfLists.style="margin-left: -10.24rem;"
    var bottomBfLists1=document.querySelectorAll('.bottomBfLists li')
    console.log(bottomBfLists1[0].offsetWidth)
    var bottomBfAll=document.querySelector('.bottomBfAll')
    setInterval(function(){
        bottomBf.style='margin-left: 0'
        bottomBfAll.style='margin-left: 0'
        for(let i=0; i<11; i++){
            setTimeout(function(){
                bottomBfLists.style=`margin-left: -${i}.23rem`
            }, 30*i)
        }
        var bottomBfLists1=document.querySelectorAll('.bottomBfLists li')
        var a=bottomBfLists1[0]
            bottomBfLists1[0].remove()
            bottomBfLists.appendChild(a)
        bottomBfLists.addEventListener('touchstart', function(event){
            startx=Math.abs(event.changedTouches[0].screenX)
            console.log(startx)
        })
        bottomBfLists.addEventListener('touchend', function(event){
            endx=Math.abs(event.changedTouches[0].screenX)
            console.log(endx)
            brr=endx-startx
            bottomBfLists.style="margin-left: 0;"
            if(brr>0){
                bottomBfAll.style='margin-left: -20.46rem'
                for(let i=0; i<11; i++){
                setTimeout(function(){
                    bottomBf.style=`margin-left: ${i}.23rem`
                }, 30*i)
                }
                
                var bottomBfLists1=document.querySelectorAll('.bottomBfLists li')
                var a=bottomBfLists1[bottomBfLists1.length-1]
                    bottomBfLists1[bottomBfLists1.length-1].remove()
                    bottomBfLists.insertBefore(a,bottomBfLists1[0])
                    bottomBf.style.marginLeft='0'
            }
            if(brr<0){
                
                // bottomBfAll.style='margin-left: -10.23rem'
                //var bottomBf=document.querySelector('.bottomBf')
                // bottomBf.style='margin-left: -10.23rem'
                // bottomBfLists.style="margin-left: -10.23rem;"
                for(let i=0; i<11; i++){
                setTimeout(function(){
                    bottomBf.style=`margin-left: -${i}.23rem`
                }, 30*i)
                }
                
                var bottomBfLists1=document.querySelectorAll('.bottomBfLists li')
                var a=bottomBfLists1[0]
                    bottomBfLists1[0].remove()
                    bottomBfLists.appendChild(a)
                    
            }
        })

        
    },3000)
    var bottomBf2=document.querySelector('.bottomBf2')
    var bottomBfLists2=document.querySelector('.bottomBfLists2')
    bottomBfLists2.innerHTML=`
    <li>
        <img src="image/img3/bottom3-1.jpg" alt="">
    </li>
    <li>
        <img src="image/img3/bottomBf3-2.jpg" alt="">
    </li>
    <li>
        <img src="image/img3/bottomBf3-3.jpg" alt="">
    </li>
    <li>
        <img src="image/img3/bottomBf3-4.jpg" alt="">
    </li>
    <li>
        <img src="image/img3/bottomBf3-5.jpg" alt="">
    </li>
    <li>
        <img src="image/img3/bottomBf3-6.jpg" alt="">
    </li>
    <li>
        <img src="image/img3/bottomBf3-7.jpg" alt="">
    </li>
    <li>
        <img src="image/img3/bottomBf3-8.jpg" alt="">
    </li>
    `
    bottomBfLists2.style="margin-left: -10.24rem;"
    var bottomBfLists3=document.querySelectorAll('.bottomBfLists2 li')
    console.log(bottomBfLists3[0].offsetWidth)
    var bottomBfAll2=document.querySelector('.bottomBfAll2')
    setInterval(function(){
        bottomBf2.style='margin-left: 0'
        bottomBfAll2.style='margin-left: 0'
        for(let i=0; i<11; i++){
            setTimeout(function(){
                bottomBfLists2.style=`margin-left: -${i}.23rem`
            }, 30*i)
        }
        var bottomBfLists3=document.querySelectorAll('.bottomBfLists2 li')
        var a=bottomBfLists3[0]
            bottomBfLists3[0].remove()
            bottomBfLists2.appendChild(a)
        bottomBfLists2.addEventListener('touchstart', function(event){
            startx=Math.abs(event.changedTouches[0].screenX)
            console.log(startx)
        })
        bottomBfLists2.addEventListener('touchend', function(event){
            endx=Math.abs(event.changedTouches[0].screenX)
            console.log(endx)
            brr=endx-startx
            bottomBfLists2.style="margin-left: 0;"
            if(brr>0){
                bottomBfAll2.style='margin-left: -20.46rem'
                for(let i=0; i<11; i++){
                setTimeout(function(){
                    bottomBf2.style=`margin-left: ${i}.23rem`
                }, 30*i)
                }
                
                var bottomBfLists3=document.querySelectorAll('.bottomBfLists2 li')
                var a=bottomBfLists3[bottomBfLists3.length-1]
                    bottomBfLists3[bottomBfLists3.length-1].remove()
                    bottomBfLists2.insertBefore(a,bottomBfLists3[0])
                    bottomBf2.style.marginLeft='0'
            }
            if(brr<0){
                
                // bottomBfAll.style='margin-left: -10.23rem'
                //var bottomBf=document.querySelector('.bottomBf')
                // bottomBf.style='margin-left: -10.23rem'
                // bottomBfLists.style="margin-left: -10.23rem;"
                for(let i=0; i<11; i++){
                setTimeout(function(){
                    bottomBf2.style=`margin-left: -${i}.23rem`
                }, 30*i)
                }
                
                var bottomBfLists3=document.querySelectorAll('.bottomBfLists2 li')
                var a=bottomBfLists3[0]
                    bottomBfLists3[0].remove()
                    bottomBfLists2.appendChild(a)
                    
            }
        })

        
    },3000)





    var topNavHead=document.querySelector('.topNavHead')
    var toTop=document.querySelector('.toTop')
    var topNavHeadLists2=document.querySelector('.topNavHeadLists')
    var topNavHeadLists=document.querySelector('.topNavHeadLists ul')
    // topNavHeadLists2.addEventListener('touchstart',function(event){
    //     startx=event.changedTouches[0].screenX
    // })
    // topNavHeadLists2.addEventListener('touchend',function(event){
    //     endx=event.changedTouches[0].screenX
    //     brr=endx-startx
    //     console.log(brr)
    //     topNavHeadLists.style=`transform: translateX(${brr}px)`

    // })
    window.onscroll=function(){
        if(window.scrollY>800){
            toTop.style='display: block'
            topNavHead.style='display: flex'

        //     if(window.scrollY>2400){
        //     var n=Math.floor((scrollY-2400)/800)
        //     var m=n*84
        //     topNavHeadLists2.style=`maegin-left: ${m}rem`
        // }
        }else{
            toTop.style='display: none'
            topNavHead.style='display: none'
        }
    }
    toTop.onclick=function(){
        window.scrollTo({
            top:0,
            behavior:'smooth'
        })
    }
    
    var moreLists=document.querySelector('#moreLists')
    moreList=function(){
        moreLists.classList.toggle('crr')
        topNavHeadLists.classList.toggle('brr')
    }
</script>
</html>